<template>
  <div class="main">
    <section>
      <el-row type="flex" class="btn-block">
        <el-col :span="3" style="marginRight:10px">
          <el-select v-model="searchParams.isTop">
            <el-option label="全部" :value="''"></el-option>
            <el-option label="不置顶" :value="0"></el-option>
            <el-option label="置顶" :value="1"></el-option>
          </el-select>
        </el-col>
        <el-col :span="3" style="marginRight:10px">
          <el-select v-model="searchParams.isShow">
            <el-option label="全部" :value="''"></el-option>
            <el-option label="隐藏" :value="0"></el-option>
            <el-option label="显示" :value="1"></el-option>
          </el-select>
        </el-col>
        <el-col :span="5" style="marginRight:10px">
          <el-input v-model="keywords" placeholder="请输入关键字" clearable @keyup.enter.native="search"></el-input>
        </el-col>
        <el-col :span="10">
          <el-button v-if="rightsButtons['search']" type="primary" size="medium" plain @click="search">搜索</el-button>
        </el-col>
        <el-col :span="3">
          <el-button v-if="rightsButtons['batchAdd']" type="success" size="small" plain @click="showAdd">批量新建</el-button>
          <el-button v-if="rightsButtons['batchDel']" type="success" size="small" plain @click="delItem('batch', '')">批量删除</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="listLoading" :data="list" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" width="55"></el-table-column>
        <el-table-column align="center" label="关键词ID" prop="id" width="160" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="关键词" prop="hotKey" min-width="100" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="是否展示" width="100" prop="show">
          <template slot-scope="scope">
            <span>{{ scope.row.show === true ? '显示' : '不显示' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否置顶" width="100" prop="top">
          <template slot-scope="scope">
            <span>{{ scope.row.top === true ? '置顶' : '不置顶' }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="rightsButtons['edit'] || rightsButtons['del']" align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button v-if="rightsButtons['edit']" type="primary" size="mini" plain @click="showEdit(scope.row)">编辑</el-button>
            <el-button v-if="rightsButtons['del']" type="primary" size="mini" plain @click="delItem('one', scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="searchParams.pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="searchParams.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
      <el-dialog :title="formData.id ? '编辑关键字' : '批量新建'" :visible.sync="showEditPop">
        <el-form ref="form" :model="formData" size="medium" label-width="100px">
          <el-form-item label="关键字:" prop="hotKey">
            <el-input v-model="formData.hotKey" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="是否展示:" prop="isShow">
            <el-switch
              v-model="formData.isShow"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="true"
              :inactive-value="false">
            </el-switch>
          </el-form-item>
          <el-form-item label="是否置顶:" prop="isTop">
            <el-switch
              v-model="formData.isTop"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="true"
              :inactive-value="false">
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" :disabled="btnDisabled" @click="save">{{ formData.id ? '确认保存' : '确认提交' }}</el-button>
          <el-button @click="showEditPop = false">返回</el-button>
        </div>
      </el-dialog>
    </section>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
export default {
  name: 'searchKeywords',
  components: {
    Tinymce
  },
  data() {
    return {
      listLoading: true,
      list: [],
      listTotal: 0,
      editKeyword: '',
      formData: {
        hotKey: '',
        isShow: false,
        isTop: false,
        id: ''
      },
      showEditPop: false,
      btnDisabled: false,
      ids: [],
      searchParams: {
        isShow: '',
        isTop: '',
        hotKey: '',
        pageIndex: 1,
        pageSize: 10
      },
      keywords: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表
    getList() {
      this.listLoading = true
      this.searchParams.hotKey = this.keywords.replace(/\s*/g, '')
      this.request({
        url: '/zhongcao-web-manage/zhong-cao-manage/hot-key/list',
        method: 'get',
        params: this.searchParams
      }).then(({ data, totalCount }) => {
        this.list = data
        this.listTotal = totalCount
        this.listLoading = false
      }).catch(err => {
        console.log(err)
        this.list = []
        this.listTotal = 0
        this.listLoading = false
      })
    },
    handleSizeChange(value) {
      this.searchParams.pageSize = value
      this.getList()
    },
    handleCurrentChange(val) {
      this.searchParams.pageIndex = val
      this.getList()
    },
    // 搜索
    search() {
      this.searchParams.pageIndex = 1
      this.getList()
    },
    handleSelectionChange(selection) {
      this.ids = []
      selection.map((item) => {
        this.ids.push(item.id)
      })
    },
    delItem(delType, row) {
      if (delType === 'batch') {
        if (this.ids.length === 0) {
          this.$message.info('请选择关键词')
          return
        }
      }
      this.request({
        url: '/zhongcao-web-manage/zhong-cao-manage/hot-key/delete',
        method: 'delete',
        data: {
          hotKeyIds: delType === 'batch' ? this.ids : [row.id]
        }
      }).then((res) => {
        console.log(res)
        this.$message.success('成功删除')
        this.getList()
      }).catch(err => {
        console.log(err)
      })
    },
    // 新建
    showAdd() {
      this.formData = {
        hotKey: '',
        isShow: false,
        isTop: false
      }
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
      this.showEditPop = true
    },
    // 编辑
    showEdit(row) {
      this.editKeyword = row.hotKey
      this.formData.hotKey = row.hotKey
      this.formData.isShow = row.show
      this.formData.isTop = row.top
      this.formData.id = row.id
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
      this.showEditPop = true
    },
    // 保存
    save() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return false
        }
        this.formData.hotKey = this.formData.hotKey.replace(/\s*/g, '')
        this.request({
          url: '/zhongcao-web-manage/zhong-cao-manage/hot-key/add',
          method: 'post',
          data: this.formData
        }).then((res) => {
          this.showEditPop = false
          this.$message.success('提交成功')
          this.getList()
        }).catch(err => {
          console.log(err)
        })
      })
    }
  }
}
</script>
<style lang="scss">

</style>
